<template>
  <div class="box">
    <div class="banner" @click="tiao(id)">
      <img
        src="https://img.youpin.mi-img.com/ferriswheel/89f1a68b_649d_4d03_a87f_7966185a73b3.png?w=786&h=228"
      />
    </div>

    <div class="lie">
      <h3>新品发布</h3>
      <ul>
        <!-- {{this.$store.state.actionsm.num}} -->
        <li v-for="v in num" :key="v.id" @click="fun(v.id)">
          <img :src="v.img" />
          <p>{{ v.name }}</p>
        </li>
        <!-- <li  v-for="(v) in num" :key="v.id">
          <img
            :src="v.img"
          />
          <p>{{v.name}}</p>
        </li> -->
      </ul>
    </div>
    <div class="lie1">
      <h3>精选专区</h3>
      <ul>
        <li v-for="v in num2" :key="v.id" @click="fun1(v.id)">
          <img :src="v.img" />
          <p>{{ v.name }}</p>
        </li>
        <li v-for="v in num1" :key="v.id">
          <img :src="v.img" />
          <p>{{ v.name }}</p>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import getlink from "@/api/apiserver.js";
export default {
  data() {
    return {
      texte: [],
      num: [],
      num1: [],
      num2: [],
      id:"02",
    };
  },
  mounted() {
    // this.$store.dispatch("AXIOS_LINK", "/movdata/data");

    //              getlink("/movdata/data").then((ok)=>{
    // console.log(ok);
    //              })
    getlink("/mobile").then((ok) => {
      console.log(ok.data);
      (this.num = ok.data),
        (this.num1 = ok.data),
        (this.num2 = ok.data);
    });
  },
  computed: {
    // fn() {
    //   return this.$store.state.actionsm.num;
    // },
  },
  methods: {
    fun(id){
      this.$router.push({path:'/list',query:{id:id}})
    },
    fun1(id){
      this.$router.push({path:'/list',query:{id:id}})
    },
     tiao(id){
      this.$router.push({path:"/dev",query:{id:id}})
    }
  },
};
</script>

<style scoped>
.box {
  background-color: #ffff;
  height: 8.3rem;
  overflow-y: auto;
}
.banner {
  width: 2.89rem;
  height: 0.84rem;
  margin-right: 0.1rem;
  margin-top: 0.1rem;
  /* float: right; */
  border-radius: 0.1rem;
}
.banner img {
  border-radius: 0.1rem;
  /* width: 2.68rem; */
  
}
.lie {
  width: 2.89rem;
  height: 3.4rem;
  margin-top: 0.15rem;
  margin-bottom: 0.76rem;
  background-color: #ffff;
}
.lie1{
  width: 2.89rem;
  height: 5.4rem;
  margin-top: 0.15rem;
  /* margin-bottom: 0.76rem; */
  background-color: #ffff;
}
h3 {
  padding: 0.08rem 0.1rem 0.06rem;
  font-weight: 500;
}
ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
li {
  width: 0.74rem;
  height: 1.26rem;
  text-align: center;
  margin-right: 0.1rem;
}
li img {
  width: 0.73rem;
  height: 0.73rem;
  background-color: rgb(248, 247, 247);
}
p{
  font-size: 0.12rem;
}
</style>
